import React, { useCallback, useEffect, useState, useRef, useMemo } from "react";
import { DownOutlined, FileTextOutlined, BarsOutlined, CloudDownloadOutlined, CloudUploadOutlined } from "@ant-design/icons";
import { Form, Button, Select, Input, Tooltip, DatePicker, Col, Divider, Row, Dropdown, Menu, Space, message } from "antd";
import { useUpdateEffect } from "ahooks";

// 引用表格组件
import {
	SimpleTable,
	SearchSimpleTable,
	CheckboxTable,
	SearchCheckboxTable,
	RadioTable,
	SearchRadioTable
} from "@/views/components/SearchTable/index";
// 引用表格配置
import { useTableConfig } from "@/views/components/SearchTable/hooks/useTableConfig";
// 引用表格列
import useColumns from "./columns";
// 引用api
import { queryPageSkuList, queryPageSpuList } from "./service";

const ShopGoodsPage = () => {
	// 列表的操作列功能
	const handleColumnsCommand = useCallback((TEXT, row) => {
		switch (TEXT) {
			case "编辑库存":
				// 调用子组件的方法，显示弹窗，并设置一个额外的参数
				if (EditActionsRef.current) {
					EditActionsRef.current.setDialog("ActionEditInventoryModal", {
						selectedRow: row
					});
				}
				break;
			default:
		}
	});
	const { isSkuType, tabValue, setTabValue, columns, setColumns } = useColumns({ handleColumnsCommand });
	// const tableRequest = tableRequestMock1;
	const tableRequest = isSkuType ? queryPageSkuList : queryPageSpuList;
	const tableKey = isSkuType ? "SKUGoodsManageShopTable" : "SPUGoodsManageShopTable";
	const {
		selectedKeys,
		selectedRows,
		fetchList,
		dataSource,
		form,
		query,
		pagination,
		updateDataSource,
		updateSearchQuery,
		updatePaginationParams,
		searchSimpleTableProps
	} = useTableConfig({
		tableKey,
		rowKey: "id",
		// ///
		columns,
		tableRequest,
		autoFetch: true,
		hasPagination: true,
		hasQuickSearch: true,
		beforeQuerySearch: false,
		resetSourceData: false,
		hasColsSetting: true
	});

	const LeftBtns = (
		<>
			<Button type="text">
				<FileTextOutlined />
				新增
			</Button>
		</>
	);

	const RightBtns = (
		<>
			<Button type="text">
				<FileTextOutlined />
				查看日志
			</Button>
		</>
	);

	/**************SimpleTable 简单表格************* */
	// return (
	// 	<>
	// 		<div className="views-container">
	// 			<div className="views-action"></div>
	// 			<SimpleTable  columns={columns} dataSource={[]} />
	// 		</div>
	// 	</>
	// );

	/**************CheckboxTable 多选表格************* */
	// return (
	// 	<>
	// 		<div className="views-container">
	// 			<div className="views-action"></div>
	// 			<CheckboxTable columns={columns} dataSource={dataSource} />
	// 		</div>
	// 	</>
	// );

	/**************SearchSimpleTable 带搜索表单的简单表格************* */
	// return <SearchSimpleTable action={false} mounted={false} {...searchSimpleTableProps} />;

	/**************SearchRadioTable 带搜索表单的单选表格************* */
	// return <SearchRadioTable action={false} mounted={false} {...searchSimpleTableProps} />;

	/**************SearchRadioTable 带搜索表单的多选表格************* */
	return (
		<SearchCheckboxTable key={tableKey} leftBtns={LeftBtns} rightBtns={RightBtns} mounted={false} {...searchSimpleTableProps} />
	);
};
export default React.memo(ShopGoodsPage, () => {
	return true;
});
